/* eslint-disable */
<template>
  <div class="body">
    <!-- 头部 -->
    <div class="input">
      <div class="state">
        <span>订单状态 </span>
        <el-select v-model="value" class="m-2" placeholder="全部订单">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="number">
        <span>订单编号</span>
        <el-input v-model="number" />
      </div>
      <div class="btn">
        <el-button type="danger" @click="content(number)">查询</el-button>
        <el-button @click="refress">重置</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div>
      <vxe-grid
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"
        stripe="true"
        border="none"
      >
        <template #operate="{ row }">
          <template v-if="$refs.xGrid.isEditByRow(row)">
            <vxe-button status="primary" title="保存" @click="saveRowEvent(row)"
              >保存</vxe-button
            >
          </template>
          <template v-else>
            <vxe-button title="修改" @click="editRowEvent(row)"
              >修改</vxe-button
            >
          </template>
          <vxe-button title="删除" @click="removeRowEvent(row)"
            >删除</vxe-button
          >
        </template>

        <template #num_edit="{ row }">
          <vxe-input v-model="row.num"></vxe-input>
        </template>
        <template #amount_edit="{ row }">
          <vxe-input v-model="row.amount"></vxe-input>
        </template>
        <template #money_edit="{ row }">
          <vxe-input v-model="row.money"></vxe-input>
        </template>
        <template #consignee_edit="{ row }">
          <vxe-input v-model="row.consignee"></vxe-input>
        </template>
        <template #address_edit="{ row }">
          <vxe-input v-model="row.address"></vxe-input>
        </template>
        <template #pay_edit="{ row }">
          <vxe-input v-model="row.pay"></vxe-input>
        </template>
        <template #status_edit="{ row }">
          <vxe-input v-model="row.status"></vxe-input>
        </template>
      </vxe-grid>
      <!-- 分页 -->
      <div class="demo-pagination-block">
        <el-pagination
          v-model:page-size="pageSize4"
          v-model:currentPage="currentPage4"
          :small="small"
          :disabled="disabled"
          :page-sizes="['1', '2', '3', '4']"
          :background="background"
          layout=" prev, pager, next,  sizes, jumper"
          :total="10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted, computed } from "vue";
// import { orderApi } from "../../../utils/api";
import {
  VXETable,
  VxeGridInstance,
  VxeGridListeners,
  VxeGridProps,
} from "vxe-table";
import order from "../../../mock/order";

export default defineComponent({
  setup() {
    const value = ref<string>("全部订单");
    let a: any = ref([]);
    let arr: any = ref([]);
    const options = [
      {
        value: "选中订单",
        label: "选中订单",
      },
      {
        value: "全部订单",
        label: "全部订单",
      },
    ];
    // 订单名称
    const name = ref<string>("");
    // 订单编号
    const number = ref<string>("");

    //分页
    const currentPage4 = ref();
    const pageSize4 = ref(1);
    const small = ref(false);
    const background = ref(true);
    const disabled = ref(false);
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = (val: number) => {
      console.log(val);
      order.getData({ pageSize: 15, currentPage: val }).then((res: any) => {
        console.log(res);
        gridOptions.data = res.result;
      });
    };
    //表格
    const xGrid = ref<VxeGridInstance>();
    const gridOptions = reactive<VxeGridProps>({
      border: true,
      keepSource: true,
      loading: false,
      columnConfig: {
        resizable: true,
      },
      // pagerConfig: {
      //   total: 200,
      //   currentPage: 1,
      //   pageSize: 15,
      //   pageSizes: [15, 30, 45, 60, 75, 90],
      // },
      editConfig: {
        trigger: "manual",
        mode: "row",
        showStatus: true,
      },
      columns: [
        { type: "checkbox", width: 50 },
        {
          field: "num",
          title: "订单编号",
          editRender: { autofocus: ".vxe-input--inner" },
          slots: { edit: "num_edit" },
        },
        {
          field: "amount",
          title: "实付金额",
          editRender: { autofocus: ".vxe-input--inner" },
          slots: { edit: "amount_edit" },
        },
        {
          field: "money",
          title: "快递金额",
          showOverflow: true,
          editRender: {},
          slots: { edit: "money_edit" },
        },
        {
          field: "consignee",
          title: "收货人",
          editRender: {},
          slots: { edit: "consignee_edit" },
        },
        {
          field: "address",
          title: "收货地址",
          showOverflow: true,
          editRender: {},
          slots: { edit: "address_edit" },
        },
        {
          field: "pay",
          title: "支付方式",
          showOverflow: true,
          editRender: {},
          slots: { edit: "pay_edit" },
        },
        {
          field: "status",
          title: "订单状态",
          showOverflow: true,
          editRender: {},
          slots: { edit: "status_edit" },
        },
        { title: "操作", width: 200, slots: { default: "operate" } },
      ],
      data: [],
    });

    const findList = () => {
      gridOptions.loading = true;
      setTimeout(() => {
        gridOptions.loading = false;
        if (gridOptions.pagerConfig) {
          gridOptions.pagerConfig.total = 10;
        }
        gridOptions.data = arr.value;
      }, 300);
    };
    const content = (num: any) => {
      // console.log(number.value);
      const arr1 = arr.value.filter((item: any) => item.num == num);
      // a.value.push(arr1[0]);
      // gridOptions.data = a.value;
      gridOptions.data = arr1;
      number.value = "";
    };
    const refress = () => {
      gridOptions.data = arr.value;
    };
    const gridEvents: VxeGridListeners = {
      pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
          gridOptions.pagerConfig.currentPage = currentPage;
          gridOptions.pagerConfig.pageSize = pageSize;
        }
        findList();
      },
    };

    const editRowEvent = (row: any) => {
      const $grid = xGrid.value;
      if ($grid) {
        $grid.setEditRow(row);
      }
    };

    const saveRowEvent = async () => {
      const $grid = xGrid.value;
      if ($grid) {
        await $grid.clearEdit();
        gridOptions.loading = true;
        // 模拟异步保存
        setTimeout(() => {
          gridOptions.loading = false;
          VXETable.modal.message({ content: "保存成功！", status: "success" });
        }, 300);
      }
    };

    const removeRowEvent = async (row: any) => {
      const type = await VXETable.modal.confirm("您确定要删除该数据?");
      const $grid = xGrid.value;
      if ($grid) {
        if (type === "confirm") {
          await $grid.remove(row);
        }
      }
    };

    findList();

    onMounted(async () => {
      const res: any = await order.getData({
        pageSize: 15,
        currentPage: 1,
      });
      arr.value = res.result;
    });
    //表格结束

    return {
      content,
      refress,
      value,
      name,
      number,
      options,
      xGrid,
      gridOptions,
      gridEvents,
      editRowEvent,
      saveRowEvent,
      removeRowEvent,
      currentPage4,
      pageSize4,
      small,
      background,
      disabled,
      handleSizeChange,
      handleCurrentChange,
    };
  },
});
</script>

<style lang="less" scoped>
.body {
  height: 942px;
  background-color: #fff;
  border-radius: 20px;
  .el-button--danger {
    background: #ffa79c;
  }
  width: 100%;
  min-width: 1120px;
  border-radius: 20px;
  background: #ffffff;
  padding: 24px 20px 24px 20px;
  .input {
    display: flex;
    position: relative;
    margin-bottom: 20px;
    .state {
      display: flex;
      margin-right: 100px;
      span {
        font-size: 18px;
        margin-right: 8px;
        line-height: 34px;
        white-space: nowrap;
      }

      /deep/.el-input__inner {
        min-width: 176px;
        min-height: 32px;
      }
    }
    .number {
      display: flex;
      margin-right: 30px;
      span {
        font-size: 18px;
        margin-right: 8px;
        white-space: nowrap;
        line-height: 34px;
      }
      /deep/.el-input__inner {
        min-width: 176px;
        min-height: 32px;
      }
    }
    .btn {
      min-width: 132px;
      position: absolute;
      right: 0;
    }
  }
}
/deep/.vxe-header--row {
  background-color: #fff0ee;
  .vxe-resizable {
    display: none;
  }
  .vxe-cell--edit-icon {
    display: none;
  }
}
/deep/.col--last {
  .vxe-cell {
    text-align: center;
  }
}
/deep/.vxe-pager {
  text-align: center;
}
/deep/.vxe-body--column .col_15 .col--edit {
  /deep/.vxe-cell {
    width: 150px;
  }
}
/deep/.vxe-grid--pager-wrapper {
  display: none;
}
//分页
.demo-pagination-block {
  margin-top: 30px;
  padding-bottom: 30px;
  display: flex;
  justify-content: center;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
/deep/.el-pagination__sizes {
  margin-left: 25px;
}
</style>
